<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="materialIdVisible"
    :before-close="handleClose"
    top="20px"
  >
    <template slot="title">
      <div :style="titleColor">标题</div>
    </template>
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-position="left"
      label-width="90px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="耗材编号">
            <el-input v-model="dataForm.fsampleno" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="样品分类">
            <el-select
                v-model="dataForm.fclassstno"
                clearable
                disabled
                filterable
                placeholder="样品分类"
              >
                <el-option
                  v-for="item in catlist"
                  :key="item.fclassstno"
                  :label="item.fclassstname"
                  :value="item.fclassstno"
                />
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
            <el-col :span="12">
                <el-form-item label="样品名称">
                    <el-input v-model="dataForm.fsamplename" readonly/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="样品条码">
                    <el-input v-model="dataForm.fbarcode" readonly/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-tabs style="width: 100%" type="border-card">
      <el-tab-pane label="所需耗材">
        <div class="app-container">
          <el-table :data="list" element-loading-text="正在查询中。。。" border>
            <el-table-column align="left" label="样品编号" prop="fbarcode" />
            <el-table-column align="left" label="耗材编号" prop="fbegdate" />
            <el-table-column align="left" label="所需数量" prop="fenddate" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="所需危化品">
        <div class="app-container">
          <el-table :data="list" element-loading-text="正在查询中。。。" border>
            <el-table-column align="left" label="样品编号" prop="fbarcode" />
            <el-table-column align="left" label="危化品编号" prop="fbegdate" />
            <el-table-column align="left" label="所需数量" prop="fenddate" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="所需样品化验步骤">
        <div class="app-container">
          <el-table :data="list" element-loading-text="正在查询中。。。" border>
            <el-table-column align="left" label="样品编号" prop="fbarcode" />
            <el-table-column align="left" label="化验步骤" prop="fbegdate" />
            <el-table-column align="left" label="化验时间(分)" prop="fenddate" />
            <el-table-column align="left" label="化验说明" prop="fenddate" />
            <el-table-column align="left" label="化验设备" prop="fenddate" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
export default {
  name: "tabs",
  props:["catlist"],
  data() {
    return {
      buttonColor,
      titleColor,
      list: [],
      dataForm: {
        fsampleno:undefined,
        fsamplename:undefined,
        fbarcode:undefined,
        fclassstno:undefined
      },
      materialIdVisible:false,
    };
  },
  created() {},
  methods: {
    handleClose() {
     this.materialIdVisible = false;
    },
    opentabs(row){
        this.dataForm=row;
        this.materialIdVisible = true;
    },
  },
};
</script>
